<template>
	<div class="page">
		<div class="logo">
			<img class="logo-img" src="../assets/userLogo-2.png" alt="" />
			<div class="right-ic" @click="changeLanguage">
				<img src="../assets/100-1.png" alt="" />
				<span>{{$i18n.locale == 'zh' ? 'EN' : '中文'}}</span>
			</div>
		</div>
		<div class="head-title">
			<span class="title">{{info.region}}</span>
			<!-- <span class="num">34%</span> -->
		</div>
	
		<div class="top-box">
			<div class="top-title">{{$t('language.text77')}}</div>
			<div class="top-content">
				<div class="top">
					<div class="top-progress-box">
						<div class="top-progress" v-if="progressWidth != 0" :style="{ width: progressWidth }">
							<span>{{activeNum}}</span>
							<img class="top-progress-ic" src="../assets/125.png">
						</div>
					</div>
					<div class="top-num">{{$t('language.text79')}}:<span class="num">{{goalNum}}</span></div>
					<div class="top-num" style="margin-top: 2px;">{{$t('language.text78')}}:<span class="num">{{progressWidth}}</span></div>
				</div>
				<div class="top-btn" @click="tapTopExcel">{{$t('language.text50')}}</div>
			</div>
		</div>
		
		<div class="main">
			<!-- <div class="title">Achieve %</div>
			<div class="title small">Sub-region East China</div> -->

			<div class="search" @click="showPopup = !showPopup">
				<span>{{search || $t('language.text51')}}</span>
				<img class="ic" src="../assets/120.png" alt="" />
			</div>

			<div class="info">
				<span class="info-text">{{$t('language.text57')}}</span>
				<span class="info-num">{{info.hotel_count}}</span>
			</div>
			<div class="info">
				<span class="info-text">{{$t('language.text58')}}</span>
				<span class="info-num">{{info.active_hotel_count}}</span>
			</div>
			<div class="info">
				<span class="info-text">{{$t('language.text59')}}</span>
				<span class="info-num">{{info.income}}</span>
			</div>
			<div class="info">
				<span class="info-text">{{$t('language.text60')}}</span>
				<span class="info-num">{{info.room_num}}</span>
			</div>
			<div class="info">
				<span class="info-text">{{$t('language.text61')}}</span>
				<span class="info-num">{{info.radio}}</span>
			</div>
		</div>
		<!-- <div class="line-wrap">
			<span class="line-title">Check hotel performance on Corporate Travel Portal</span>
			<van-icon name="arrow" size="16" />
		</div> -->
		
		
		<div class="add-btn">
			<div class="btn" @click="tapExcel">{{$t('language.text37')}}</div>
		</div>
		
		<van-popup v-model="showPopup" position='bottom'>
			<van-datetime-picker :confirm-button-text="$t('language.text52')" :cancel-button-text="$t('language.text53')" v-model="currentDate" type="year-month" @confirm="dateConfirm" @cancel="showPopup = !showPopup" :min-date="minDate" :max-date="maxDate" />
		</van-popup>
	</div>
</template>
<script>
	import {
		getRegion,
		openMsg,
		exportRegion,
		targetExportRegion,
		targetInfoRegion
	} from '@/api/user';
	import { Dialog } from 'vant';
	import {
		Toast
	} from "vant";
	let timer = null
		
	export default {
		name: 'FormsInfo',
		data: function() {
			return {
				locale: 'zh',
				search: '',
				year: new Date().getFullYear(),
				month: new Date().getMonth() + 1,
				minDate: new Date(1999, 0, 1),
				maxDate: new Date(),
				currentDate: new Date(),
				showPopup: false,
				notTap: false,
				info: {},
				progressWidth: 0,
				goalNum: 0,
				activeNum: 0
			};
		},
		created() {
			this.getRegionData()
			this.getTargetInfo()
			let userinfo = JSON.parse(localStorage.getItem('userinfo'))
			if(userinfo && userinfo.is_open_msg == 0) {
				Dialog.alert({
					title: this.$i18n.tc('language.text18'),
					message: this.$i18n.tc('language.text19'),
					theme: 'round-button',
					confirmButtonText: this.$i18n.tc('language.text20'),
				}).then(() => {
					userinfo.is_open_msg = 1
					localStorage.setItem('userinfo', JSON.stringify(userinfo))
					this.getOpenMsg()
				});
			}
		},
		mounted() {},
		methods: {
			getTargetInfo() {
				targetInfoRegion().then((res) => {
					const { percentage_all, goal_num_all, active_num_all } = res.data
					this.progressWidth = percentage_all
					this.goalNum = goal_num_all
					this.activeNum = active_num_all
				}).catch((err) => {
					console.log(err)
				})
			},
			getRegionData() {
				getRegion({
					year: this.year,
					month: this.month
				}).then((res) => {
					this.info = res.data
				}).catch((err) => {
					console.log(err)
				})
			},
			getOpenMsg() {
				openMsg().then((res) => {
					console.log(res, 'openMsg')
				}).catch((err) => {
					console.log(err)
				})
			},
			formatDate(date) {
				let _year = date.getFullYear()
				let _month = date.getMonth() + 1
				this.year = _year
				this.month = _month
				return `${_year}-${_month}`;
			},
			tapSearch() {
				this.showPopup = !this.showPopup
			},
			dateConfirm(date) {
				this.search = this.formatDate(date)
				this.showPopup = !this.showPopup
				this.getRegionData()
			},
			tapTopExcel() {
				const t = this
				if(t.notTap) return
				t.notTap = true
				timer = setTimeout(()=>{
					t.notTap = false
					clearTimeout(timer)
					timer = null
				},1000)
				Toast.loading({
					forbidClick: true,
					duration: 0
				});
				targetExportRegion().then((res) => {
					Toast.clear();
					if (res.status_code != 200) {
						Toast(res.message)
					} else {
						Toast(t.$i18n.tc('language.text68'))
					}
				}).catch((err) => {
					Toast.clear();
					console.log(err)
				})
			},
			tapExcel() {
				const t = this
				if(t.notTap) return
				t.notTap = true
				timer = setTimeout(()=>{
					t.notTap = false
					clearTimeout(timer)
					timer = null
				},1000)
				Toast.loading({
					forbidClick: true,
					duration: 0
				});
				exportRegion().then((res) => {
					Toast.clear();
					if (res.status_code != 200) {
						Toast(res.message)
					} else {
						Toast(t.$i18n.tc('language.text68'))
					}
				}).catch((err) => {
					Toast.clear();
					console.log(err)
				})
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					this.$cookies.set('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					this.$cookies.set('locale', 'zh')
				}
			}
		}
	};
</script>
<style type="text/css" lang="scss" scoped>
	.page {
		background-color: #f2f5f7;
	}

	.head-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36px;
		font-weight: 500;
		color: #FFFFFF;
		height: 114px;
		padding: 0 30px;
		box-sizing: border-box;
		background-color: #1f4456;
	}
	
	.top-box {
		margin: 24px 30px 0;
		padding: 30px;
		box-sizing: border-box;
		border-radius: 10px;
		background-color: #FFFFFF;
	}
	
	.top-title {
		font-size: 30px;
		color: #000000;
		padding-bottom: 30px;
	}
	
	.top-content {
		display: flex;
		align-items: center;
		
		.top-btn {
			flex-shrink: 0;
			align-self: flex-start;
			padding: 8px 24px;
			border-radius: 30px;
			font-size: 20px;
			color: #FFFFFF;
			white-space: nowrap;
			background-color: #1f4456;
			position: relative;
			top: -10px;
		}
		
	}
	
	.top {
		margin-right: 24px;
		flex: 1;
		
		.top-progress-box {
			height: 26px;
			border-radius: 14px;
			background-color: #f1e0ca;
			
			.top-progress {
				min-width: 2%;
				max-width: calc(100% - 12px);
				height: 100%;
				border-radius: 14px 0 0 14px;
				background: linear-gradient(90deg, #ed9e15, #e8542c);
				position: relative;
				
				span {
					position: absolute;
					top: 50%;
					left: 10px;
					transform: translateY(-50%) scale(0.8);
					font-size: 12px;
					color: #fff;
				}
			}
		}
		
		.top-progress-ic {
			width: 30px;
			height: 30px;
			position: absolute;
			top: 50%;
			right: -12px;
			transform: translateY(-50%);
		}
		
		.top-num {
			font-size: 24px;
			color: #666666;
			margin-top: 40px;
			
			.num {
				color: #e8542c;
			}
		}
	}

	.main {
		// padding: 30px;
		// box-sizing: border-box;
		margin: 30px;
		// background-color: #fff;
		// border-radius: 10px;
		
		.search {
			position: relative;
			z-index: 10;
			padding: 0 28px;
			margin-bottom: 50px;
			width: 50%;
			height: 74px;
			border: 2px solid #1f4456;
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 45px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		
			span {
				font-size: 24px;
				color: #666;
			}
		
			.ic {
				width: 18px;
				height: 14px;
				flex-shrink: 0;
			}
		}
		
		.title {
			font-size: 30px;
			font-weight: 500;
			color: #010101;
			position: relative;
			padding-left: 24px;
			margin-bottom: 90px;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				width: 4px;
				height: 80%;
				transform: translateY(-50%);
				background-color: #E8542C;
			}

			&.small {
				margin-bottom: 50px;
			}
		}

		.svg-title {
			font-size: 36px;
			font-weight: bold;
			color: #000000;
			margin: 34px 0 98px;
			text-align: center;
		}

		.info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 38px;

			.info-text {
				width: 80%;
				font-size: 24px;
				font-weight: 500;
				color: #333333;
			}

			.info-num {
				font-size: 30px;
				// font-weight: bold;
				color: #999999;
			}
		}

	}
	
	.van-popup {
		border-radius: 15px 15px 0 0;
	}
	
	.line-wrap {
		padding: 30px;
		box-sizing: border-box;
		margin: 30px;
		background-color: #fff;
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.line-title {
			font-size: 24px;
			font-weight: bold;
			color: #000000;
		}
	}

	.logo {
		background-color: #fff;

		.tab-app {
			display: flex;
			align-items: center;
			font-size: 24px;
			color: #333333;

			img {
				width: 31px;
				height: 30px;
				margin-right: 6px;
			}
		}

		.right-ic {
			color: #333333;
		}
	}
	
	.add-btn {
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 1000;
		width: 100%;
		height: 114px;
		max-width: 750px !important;
		color: #fff;
		font-size: 28px;
		background-color: #fff;
		box-shadow: 0 2px 24px #eee;
		padding: 14px 30px;
	
		.btn {
			width: 100%;
			padding: 21px 0;
			border-radius: 10px;
			text-align: center;
			background-color: #e8542c;
		}
	}
</style>